<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>地址</title>

	<!--App自定义的css-->
	<link href="css/mui.picker.css" rel="stylesheet" />
	<link href="css/mui.poppicker.css" rel="stylesheet" />
	
    <link rel="stylesheet" href="css/aaddress.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" >

</head>
<body style="background-color: #F1F1F1;">
    <!--头部开始-->
     <nav class="container-fluid header navbar-fixed-top">
            <div class="row">
                <a href="address.html">
                    <div class="col-xs-1 text-right right">
                        <svg t="1588050361008" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5675" width="26" height="33"><path d="M771.072 105.472 715.776 51.2 242.688 512 715.776 972.8 771.072 918.528 354.304 512Z" p-id="5676" fill="#2c2c2c"></path></svg>
                    </div>
                </a>
                <div class="col-xs-10 text-center center">
                    <p style="font-family:'微软雅黑';color:black;font-size: 18px;">添加收货地址</p>
                </div>
            </div>
     </nav>

     <div class="content">
        <div class="weizhi">
            <p>所在小区：<span class="dingwei">游客俱乐部</span></p>
        </div>
        <form action="" method=""> 
            <p>收货人<input type="text" placeholder="请输入收货人信息" class="one"/></p>
            <p>电话号码<input type="text" placeholder="请输入联系电话" class="two"/></p>
           <span id='showCityPicker3'  type='button' class="three"><div id='cityResult3' class="ui-alert">省、市、区</div></span>
           <hr>
            <p style="clear: both;overflow:hidden;margin-top: 14px;">详细地址<textarea rows="2" cols="20" wrap="soft" placeholder="请输入收货地址信息" class="four"></textarea></p>
       
            <div class="default">
                <p>设为默认收货地址</p>
            </div>
            <input type="submit" class="submit" value="保存">
            <span id='showUserPicker'></span>
            <span id='showCityPicker' type='button'><div id='cityResult'></div></span>
            
        </form>
     </div>
     

<script src="js/mui.min.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });
        mui('.mui-content .mui-switch').each(function() { //循环所有toggle
            //toggle.classList.contains('mui-active') 可识别该toggle的开关状态
            this.parentNode.querySelector('span').innerText = '设为默认收货地址' + (this.classList.contains('mui-active') ? ' ' : ' ');
            /**
             * toggle 事件监听
             */
            this.addEventListener('toggle', function(event) {
                //event.detail.isActive 可直接获取当前状态
                this.parentNode.querySelector('span').innerText = '设为默认收货地址' + (event.detail.isActive ? ' ' : ' ');
            });
        });
    </script>
<script>
    

    (function($, doc) {
        $.init();
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //普通示例
            var userPicker = new $.PopPicker();
            
            var showUserPickerButton = doc.getElementById('showUserPicker');
            var userResult = doc.getElementById('userResult');
            showUserPickerButton.addEventListener('tap', function(event) {
                userPicker.show(function(items) {
                    userResult.innerText = JSON.stringify(items[0]);
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
            //-----------------------------------------
            //级联示例
            var cityPicker = new $.PopPicker({
                layer: 2
            });
            cityPicker.setData(cityData);
            var showCityPickerButton = doc.getElementById('showCityPicker');
            var cityResult = doc.getElementById('cityResult');
            showCityPickerButton.addEventListener('tap', function(event) {
                cityPicker.show(function(items) {
                    cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
            //-----------------------------------------
            //					//级联示例
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('showCityPicker3');
            var cityResult3 = doc.getElementById('cityResult3');
            showCityPickerButton.addEventListener('tap', function(event) {
                cityPicker3.show(function(items) {
                    cityResult3.innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);
</script>
</body>
</html>
